<template>
  <div class="max-input" :style="defaultTheme">
    <input :class="[`max-input-content`,`max-input--${type}`]"
           :readonly="type==='disabled' || type==='loading'"
           @focus="focus" @blur="blur"
           type="text" v-model="currentValue">
    <span :class="[`max-input-label`, {'label-top': labelTop}]">
      <slot></slot>
    </span>
  </div>
</template>
<script>
import {defineComponent, reactive, ref, watch} from "vue";

export default defineComponent({
  name: 'max-input',
  setup(props, context) {
    /**
     * 变量列表：
     * defaultTheme：默认主题配置
     * currentValue：当前数值
     * labelTop：标题置顶
     * active：输入激活
     */
    const defaultTheme = reactive({
      '--firstColor': '#1890ff',
      '--secondColor': '#40a9ff',
      '--thirdColor': '#b9c1ca',
      '--fontColor': '#595f6e',
      '--backGroundColor': 'transparent'
    });
    const currentValue = ref('');
    const labelTop = ref(false);
    /**
     * 方法列表：
     * init：初始化
     * focus：获得焦点
     * blur：失去焦点
     */
    const init = () => {
      Object.assign(defaultTheme, props.theme);
      currentValue.value = props.value;
      if(props.value !== '') focus();
    }

    const focus = () => {
      if(props.type === 'default'){
        labelTop.value = true;
      }
    }

    const blur = () => {
      if (currentValue.value === '') {
        labelTop.value = false;
      }
    }

    watch(() => currentValue.value, (newVal, oldVal) => {
      context.emit('update:value', newVal);
    });

    watch(() => props.value, (newVal, oldVal) => {
      currentValue.value = newVal;
      if(newVal !== '') focus();
    });

    init();
    return {
      defaultTheme,
      currentValue,
      labelTop,
      focus,
      blur
    }
  },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    value: {
      type: String,
      default: ''
    },
    /**
     * 1.文字输入 text
     * 2.数字输入 number
     * 3.密码输入 password
     * 4.级联选择 select
     * 5.日期选择 data
     * 6.文件上传 file
     */
    form: {
      type: Object,
      default: {
        type: 'text',
        rule: []
      }
    },
    theme: {
      type: Object,
      default: {}
    }
  },
});
</script>
<style scoped>
.max-input {
  box-sizing: border-box;
  position: relative;
  margin: 4px 2px;
  padding: 1px;
  background: var(--backGroundColor);
  color: var(--fontColor);
  font-size: 14px;
  font-weight: 600;
  height: 50px;
}

.max-input-content {
  border: 0;
  outline: none;
  width: 100%;
  margin-top: 25px;
  border-bottom: 2px solid var(--thirdColor);
}

.max-input--default {
  position: relative;
  border-bottom-color: var(--secondColor);
}

.max-input--default:focus {
  border-bottom-color: var(--firstColor);
}

.max-input--loading,
.max-input--loading:active,
.max-input--loading:focus,
.max-input--loading:hover {
  cursor: not-allowed;
}

.max-input--disabled,
.max-input--disabled:active,
.max-input--disabled:focus,
.max-input--disabled:hover {
  cursor: not-allowed;
  background-image: none;
}

.max-input-label {
  position: absolute;
  top: 24px;
  left: 0px;
}

.label-top {
  position: absolute;
  top: 2px;
  left: 0px;
}
</style>

